<!-- 编辑角色 -->
<template>
    <div class='bgff h100 pd pt10 dfgfdgtrt'>
        <p class="title-label">编辑角色</p>
        <n-form inline size="normal" class="mt20">
            <n-form-item>
                <n-button type="info" size="medium" class="ml10" @click="saveFun">保存</n-button>
                <n-button type="error" size="medium" class="ml10" @click="callBack">返回</n-button>
            </n-form-item>
        </n-form>
        <div class="mt20" v-if="ishow">
            <n-form ref="formRef" label-placement="left" label-width="100px" require-mark-placement="right-hanging"
                size="medium" :style="{
                    maxWidth: '1000px',
                }">
                <n-grid :cols="24" :x-gap="20">
                    <n-form-item-gi :span="12" label="角色名称" class="mt20">
                        <n-input type="text" placeholder="" size="medium" clearable v-model:value="name"></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi :span="24" label="角色名称">
                        <n-tree block-line  checkable :data="Treedata" expand-on-click selectable
                            label-field="title" key-field="id" default-expand-all @update:checked-keys="treechange"   :default-checked-keys="defaultCheckedKeys"/>
                    
                        </n-form-item-gi>
                </n-grid>
            </n-form>

        </div>
    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue";
import { callBack, dxpost, qurl, dxget, dxdel, dialog, TreeMenudx } from "../../util/index"
const Treedata = ref([])
const ishow = ref(false)
const RoleOfTheMenu = ref()
const apiUrl = "jk/jkrolemanagement"
const name = ref()
const cz = qurl()
const defaultCheckedKeys = ref([])
let jsbj = false // 是否为编辑的状态
const initData = async () => {
    const { data }: any = await dxget('jk/jkchannelmanagement')
    Treedata.value = TreeMenudx(data)
    if(!jsbj){
        ishow.value = true
    }
}
initData()
const treechange = (e,b,c) => {
    RoleOfTheMenu.value = e.join(",")
}
const saveFun = async () => {
    console.log(RoleOfTheMenu.value);
    if(!name.value){
        window.$message.error("请输入角色名称")
        return
    }
    if(!RoleOfTheMenu.value){
        window.$message.error("请勾选角色的权限")
        return
    }
    const obj = {
        name:name.value,
        RoleOfTheMenu:RoleOfTheMenu.value
    }
    if(jsbj){
        obj["id"] = cz.id
    }
    const { errno }: any = await dxpost(apiUrl, obj,jsbj?'put':"post")
    if (errno == 0) {
        window.$message.success("操作成功！")
        callBack()
    }
}
const getQx = async()=>{
  const {data}:any= await  dxget(apiUrl,{id:cz.id})
  name.value = data.name
 
  
  if(data.RoleOfTheMenu){
    RoleOfTheMenu.value = data.RoleOfTheMenu
    const arrs = []
    data.RoleOfTheMenu.split(",").map(a=>{
        arrs.push(parseInt(a))
    })
    defaultCheckedKeys.value= arrs
    if(jsbj){
        ishow.value = true
    }
  }
}
if(cz.id){
    jsbj = true
    getQx()
}

</script>
<style scoped>

</style>